<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="./fonts/iconfont.css">

    <link rel="stylesheet" href="./css/test.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/swiper.min.js"></script>
    <script src="js/public.js"></script>

</head>

<body>
    <header class="header">
        <div class=" pubCon hdCon">
            <a href="#" class="hdLogo">
                <img src="./images/hd_logo.png" alt="">
            </a>
            <nav class="hdNav">
                <ul>
                    <li>
                        <a href="#">首页</a>
                    </li>
                    <li>
                        <a href="#">案例</a>
                    </li>
                    <li>
                        <a href="#">服务</a>
                    </li>
                    <li>
                        <a href="#">关于我们</a>
                    </li>
                    <li>
                        <a href="#">新闻资讯</a>
                    </li>
                </ul>
            </nav>
            <div class="hdMenu">
                <i></i>
                <i></i>
                <i></i>
            </div>
        </div>

    </header>
    <section class="banner">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <a href="#" class="big" style="background-image: url(images/banner1.jpg);"></a>
                    <a href="#" class="small" style="background-image: url(images/small1.jpg);"></a>

                </div>
                <div class="swiper-slide">
                    <a href="#" class="big" style="background-image: url(images/banner2.jpg);"></a>
                    <a href="#" class="small" style="background-image: url(images/small2.jpg);"></a>

                </div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>

            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>

        </div>

    </section>
    <script>
        var mySwiper = new Swiper('.banner .swiper-container', {
            loop: true, // 循环模式选项

            // 如果需要分页器
            pagination: {
                el: '.banner .swiper-pagination',
            },

            // 如果需要前进后退按钮
            navigation: {
                nextEl: '.banner .swiper-button-next',
                prevEl: '.banner .swiper-button-prev',
            },

        })
    </script>

    <section class="service">
        <div class="pubTit serTit">
            <h2>我们专注的服务啊</h2>
            <div class="line"></div>
        </div>

        <div class="pubCon serCon">
            <a href="#" class="box">
                <div class="boxIcon">
                    <span class="iconfont icon-shouji-xian"></span>
                </div>
                <h3>app开发</h3>
                <p>以移动互联网及智能终端为载体，将用户和企业进行连接。公司提供的移动端服务具有高</p>
            </a>
            <a href="#" class="box">
                <div class="boxIcon">
                    <span class="iconfont icon-bijibendiannao-xian"></span>
                </div>
                <h3>网站开发</h3>
                <p>以移动互联网及智能终端为载体，将用户和企业进行连接。公司提供的移动端服务具有高</p>
            </a>
            <a href="#" class="box">
                <div class="boxIcon">
                    <span class="iconfont icon-saodijiqiren-xian"></span>
                </div>
                <h3>电商设计</h3>
                <p>以移动互联网及智能终端为载体，将用户和企业进行连接。公司提供的移动端服务具有高</p>
            </a>
            <a href="#" class="box">
                <div class="boxIcon">
                    <span class="iconfont icon-taideng-xian"></span>
                </div>
                <h3>技能教育</h3>
                <p>以移动互联网及智能终端为载体，将用户和企业进行连接。公司提供的移动端服务具有高</p>
            </a>
        </div>

    </section>

    <section class="about">
        <div class="pubTit abtTit">
            <h2>我们是不断创新、专注研究、充满活力的</br>用户体验专家</h2>
            <div class="line"></div>
        </div>
        <div class="pubCon abtCon">
            <div class="abtText">
                唯品互动网络成立于2010年，我是是一家具有创新、追求、责任、活力设计开发公司。专注于移动互联网与智能可穿戴设备领域,主要为客户提供APP设计开发、网站设计开发、软件设计开发、工业设计,全方位个性 化设计开发服务。我们的价值与宗旨是为用户和客户打造最nice的设计，用设计提升产品和企业价值。
            </div>
            <div class="btnGroup">
                <a href="#" class="btn btnLeft">咨询我们</a>
                <a href="#" class="btn btnRit">了解更多</a>
            </div>
        </div>

    </section>

    <section class="case">
        <div class="pubTit">
            <h2>我们的项目案例展示</h2>
            <div class="line"></div>
        </div>

        <div class="pubCon caseCon">


            <a href="#" class="box">
                <img class="pic" src="images/case1.jpg" alt="">
                <div class="ceng">
                    <h3>这是标题文字</h3>
                    <div class="line"></div>
                    <p>这是该项目的内容介绍这是该项目的内容介绍这是该项目的内容介绍这是该项目的内容介绍</p>
                </div>
            </a>

            <a href="#" class="box">
                <img class="pic" src="images/case2.jpg" alt="">
                <div class="ceng">
                    <h3>这是标题文字</h3>
                    <div class="line"></div>
                    <p>这是该项目的内容介绍这是该项目的内容介绍这是该项目的内容介绍这是该项目的内容介绍</p>
                </div>
            </a>

            <a href="#" class="box">
                <img class="pic" src="images/case3.jpg" alt="">
                <div class="ceng">
                    <h3>这是标题文字</h3>
                    <div class="line"></div>
                    <p>这是该项目的内容介绍这是该项目的内容介绍这是该项目的内容介绍这是该项目的内容介绍</p>
                </div>
            </a>

            <a href="#" class="box">
                <img class="pic" src="images/case4.jpg" alt="">
                <div class="ceng">
                    <h3>这是标题文字</h3>
                    <div class="line"></div>
                    <p>这是该项目的内容介绍这是该项目的内容介绍这是该项目的内容介绍这是该项目的内容介绍</p>
                </div>
            </a>

            <a href="#" class="box">
                <img class="pic" src="images/case5.jpg" alt="">
                <div class="ceng">
                    <h3>这是标题文字</h3>
                    <div class="line"></div>
                    <p>这是该项目的内容介绍这是该项目的内容介绍这是该项目的内容介绍这是该项目的内容介绍</p>
                </div>
            </a>

            <a href="#" class="box">
                <img class="pic" src="images/case6.jpg" alt="">
                <div class="ceng">
                    <h3>这是标题文字</h3>
                    <div class="line"></div>
                    <p>这是该项目的内容介绍这是该项目的内容介绍这是该项目的内容介绍这是该项目的内容介绍</p>
                </div>
            </a>

            <a href="#" class="box">
                <img class="pic" src="images/case7.jpg" alt="">
                <div class="ceng">
                    <h3>这是标题文字</h3>
                    <div class="line"></div>
                    <p>这是该项目的内容介绍这是该项目的内容介绍这是该项目的内容介绍这是该项目的内容介绍</p>
                </div>
            </a>


            <a href="#" class="box">
                <img class="pic" src="images/case8.jpg" alt="">
                <div class="ceng">
                    <h3>这是标题文字</h3>
                    <div class="line"></div>
                    <p>这是该项目的内容介绍这是该项目的内容介绍这是该项目的内容介绍这是该项目的内容介绍</p>
                </div>
            </a>

            <a href="#" class="box">
                <img class="pic" src="images/case9.jpg" alt="">
                <div class="ceng">
                    <h3>这是标题文字</h3>
                    <div class="line"></div>
                    <p>这是该项目的内容介绍这是该项目的内容介绍这是该项目的内容介绍这是该项目的内容介绍</p>
                </div>
            </a>

        </div>

    </section>

    <section class="client">
        <div class="pubTit">
            <h2>我们服务的客户</h2>
            <div class="line"></div>
        </div>
        <div class="clientCon pubCon">
            <ul>
                <li><img src="images/l1.jpg" alt=""></li>
                <li><img src="images/l2.jpg" alt=""></li>
                <li><img src="images/l3.jpg" alt=""></li>
                <li><img src="images/l4.jpg" alt=""></li>
                <li><img src="images/l5.jpg" alt=""></li>
                <li><img src="images/l6.jpg" alt=""></li>
                <li><img src="images/l7.jpg" alt=""></li>
                <li><img src="images/l8.jpg" alt=""></li>
                <li><img src="images/l9.jpg" alt=""></li>
                <li><img src="images/l10.jpg" alt=""></li>
                <li><img src="images/l11.jpg" alt=""></li>
                <li><img src="images/l12.jpg" alt=""></li>
            </ul>
        </div>
    </section>
    <footer class="footer">
        <div class="ftMain pubCon">

            <a href="#" class="ftLogo">
                <img src="images/ft_logo.png" alt="">
                <div class="text">
                    <p>weipin.com</p>
                    <h1>唯品互动网络科技</h1>
                </div>
            </a>

            <div class="ftCon">
                <div class="ftContact">
                    <h4>商务合作</h4>
                    <p>
                        邮箱：1513573894@163.com <br> 手机：13088886666
                        <br> Q Q：51333338888 <a target="_blank" href="tencent://message/?uin=1129946047&Menu=yes">点击交谈</a><br> 微博：@唯品互动网络
                        <br>
                    </p>
                </div>

                <div class="ftLink">
                    <div class="box">
                        <h4>服务</h4>
                        <a href="#">全部</a>
                        <a href="#">APP开发</a>
                        <a href="#">网站设计制作</a>
                        <a href="#">电商设计</a>
                        <a href="#">技能教育</a>
                    </div>

                    <div class="box">
                        <h4>服务</h4>
                        <a href="#">全部</a>
                        <a href="#">APP开发</a>
                        <a href="#">网站设计制作</a>
                        <a href="#">电商设计</a>
                        <a href="#">技能教育</a>
                    </div>

                    <div class="box">
                        <h4>服务</h4>
                        <a href="#">全部</a>
                        <a href="#">APP开发</a>
                        <a href="#">网站设计制作</a>
                        <a href="#">电商设计</a>
                        <a href="#">技能教育</a>
                    </div>

                    <div class="box">
                        <h4>服务</h4>
                        <a href="#">全部</a>
                        <a href="#">APP开发</a>
                        <a href="#">网站设计制作</a>
                        <a href="#">电商设计</a>
                        <a href="#">技能教育</a>
                    </div>
                </div>


                <div class="ftEwm">
                    <img src="images/erweima.png" alt="">
                    <p>唯品微信公众号</p>
                </div>
            </div>
        </div>

        <div class="copyright">
            版权所有&copy;<a href="#">唯品互动</a>Copyright 2010-<span class="year"></span> weipin design All rights reserved <a href="#" target="_blank">鲁ICP备110000000号</a>
        </div>
    </footer>
    <script>
        var year = new Date().getFullYear();
        $(".year").html(year)
    </script>

</body>

</html>